<template>
	<view>
		<uni-nav-bar fixed="true" leftWidth="400rpx" height="120rpx" statusBar="true" backgroundColor="#6869a8" color="white">
			<view class="head" slot="left">
				<image :src="this.$store.state.userInfo.avatar" class="avatar" @click="personal"></image>
				<text class="username">
					联系人
				</text>
			</view>
			<view class="" slot="right">
				<uni-icons type="personadd" size="30" @click="search" color="white"></uni-icons>
			</view>
		</uni-nav-bar>
		<!-- 		<view class="">
			<view class="search">
				<uni-icons customPrefix="iconfont" type="icon-search" color="#B2B4C0" size="17"></uni-icons>搜索
			</view>
		</view> -->
		<uni-list :border="false">
			<uni-list-item clickable @click="group">
				<template v-slot:header>
					<text style="font-size: 34rpx;margin: auto 0;">群聊</text>
				</template>
				<template v-slot:footer>
					<uni-icons type="right" size="25"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item clickable @click="newFriend">
				<template v-slot:header>
					<uni-badge :text="friendRequest" absolute="rightTop" :offset="[-10,10]">
						<text style="font-size: 34rpx;margin: auto 0;">新朋友</text>
					</uni-badge>
				</template>
				<template v-slot:footer>
					<uni-icons type="right" size="25"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item clickable @click="groupmessage">
				<template v-slot:header>
					<uni-badge :text="groupRequest" absolute="rightTop" :offset="[-10,10]">
						<text style="font-size: 34rpx;margin: auto 0;">群通知</text>
					</uni-badge>
				</template>
				<template v-slot:footer>
					<uni-icons type="right" size="25"></uni-icons>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="friendList">
			<!-- <scroll-view scroll-y="true"> -->
			<ren-enIndex :key="timer" ref='ren' :original="friendList" @press="watchFriend"></ren-enIndex>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import RenEnIndex from '@/components/ren-enIndex/ren-enIndex.vue';
	export default {
		components: {
			RenEnIndex
		},
		data() {
			return {
				// letters: [],
				friendList: [],
				timer: 0
			};
		},
		methods: {},
		onShow() {
			this.$request.TokenRequest({
				url: "/friend/getFriendList"
			}, {}).then(res => {
				if (res.state === 200) {
					this.friendList = res.data
					if (new Date().getTime() - this.timer > 15000)
						this.timer = new Date().getTime()
				}
			})
		},
		methods: {
			//个人信息页面
			personal() {
				uni.navigateTo({
					url: "../personal/personal"
				})
			},
			//搜索
			search() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			//跳转好友详情页
			watchFriend(id) {
				// console.log(id)
				uni.navigateTo({
					url: '../informationPage/informationPage?id=' + id,
					fail(e) {
						console.log(e)
					}
				})
			},
			//跳转新添加好友消息
			newFriend() {
				console.log("新好友")
				uni.navigateTo({
					url: "../newFriend/newFriend"
				})
			},
			group() {
				//群列表页
				uni.navigateTo({
					url: "../groupList/groupList"
				})
			},
			groupmessage() {
				//群申请等消息
				uni.navigateTo({
					url: "../groupVerify/groupVerify"
				})
			}
		},
		computed: {
			friendRequest() {
				return this.$store.state.friendRequestNum
			},
			groupRequest() {
				return this.$store.state.groupRequestNum
			}
		}
	}
</script>

<style scoped>
	.username {
		padding-left: 20rpx;
		font-size: 40rpx;
	}

	.avatar {
		border-radius: 10rpx;
		height: 60rpx;
		width: 60rpx;
	}

	.head {
		display: flex;
		align-items: center;
	}

	.search {
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx 40rpx;
		text-align: center;
		background-color: #F5F5F5;
		font-size: 30rpx;
		color: #B2B4C0;
	}
</style>
